<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>进度条案例</title>
		<style type="text/css">
			#fa{
				width: 400px;
				
				border: 1px solid red;
			}
			#san{
				width: 0;
				height: 40px;
				background-color: #8B4513;
				text-align: center;
				line-height: 40px;
			}
			button{
				width: 100px;
				height: 50px;
				margin-top: 20px;
				margin-left: 50px;
			}
		</style>
	</head>
	<body>
		<div id="fa">
			<div id="san">
				<span id="span">0</span>
			</div>
		</div>
		<button type="button" id="btn">安装</button>
		<button type="button" id="no">取消安装</button>
		<script type="text/javascript">
			var span = document.getElementById('span');
			var btn = document.getElementById('btn');
			var san = document.getElementById('san');
			var no = document.getElementById('no');
			var x = 0 ;
			var timer = '';
			function times(){
				btn.onclick = function(){
					let num = 0 ;
					timer = setInterval(function(){
						span.innerHTML=(this.x++)+'%';
						num += 4;
						san.style.width= num+'px';
						if(this.x== 100){
							span.innerHTML='安装完成';
							clearInterval(timer);
						
						}
						
					},100);
				}
			}
			times();
			no.onclick = function(){
				/* san.style.width=0+'px';
				span.innerHTML=0; */
				no.innerHTML = '继续安装';
				clearInterval(timer);
			}
			no.onmouseover = function(){
				no.innerHTML = '取消安装';
				times();
			}
		</script>
	</body>
</html>
